<template>
	<view class="videoAll">
		<view v-if="list.length == 0" class="none">
			<i class="iconfont iconwujilu"></i>
			<text>暂无数据</text>
		</view>
		<view class="cont">
			<view class="contItem" v-for="(item, index) in list" :key="index" v-if="item.black_state == false || !item.black_state" @tap="videoDetail(index)">
				<image v-if="item.img_url" :src="item.img_url" mode="center"></image>
				<view class="item">
					<view class="title" v-html="item.title"></view>
					<view class="info">
						<image v-if="item.avatar" :src="item.avatar ? item.avatar : defimg" @tap.stop="person(item.user_id)"></image>
						<view class="up" :class="[item.is_like == 2 ? 'zan_active' : '']" @tap.stop="giveUp(item.video_id, item.is_like, index)">
							<i class="iconfont1 iconzan"></i>
							<text v-if="item.likenum < 10000">{{ item.likenum }}</text>
							<text v-else>{{ item.likenum / 10000 }}w</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="list.length >= 5" :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				defimg: this.defimg
			}
		},
		props: {
			list: Array,
			status: String,
			contentText: Object,
			type: String,
			school_id: Number,
			pagesize: {
				type: Number,
				default: 1
			},
			users_type: {
				type: Number,
				default: 1
			}
		},
		methods: {
			/* 点赞 & 取消点赞 */
			giveUp(video_id, is_like, index) {
				var state = 0;
				if (is_like == 2) {
					state = 1;
				} else {
					state = 2;
				}
				var data = {
					video_id: video_id,
					is_like: state
				};
				this.$zapi.apiPost('user/video.Lists/isLike', data).then(res => {
					if (res.data.code == 200) {
						if (is_like == 2) {
							this.list[index].is_like = 0;
							this.list[index].likenum--;
						} else {
							this.list[index].is_like = 2;
							this.list[index].likenum++;
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			},
			/* 跳转视频详情 */
			videoDetail(index) {
				var url = '';
				if (this.school_id) {
					url = '../../pages/topic/videoDetail?index=' + index + '&pagesize=' + this.pagesize + '&type=1' + '&users_type=' +
						this.users_type + '&school_id=' + this.school_id;
				} else {
					url = '../../pages/topic/videoDetail?index=' + index + '&pagesize=' + this.pagesize + '&type=1' + '&users_type=' +
						this.users_type;
				}
				uni.navigateTo({
					url: url
				});
			},
			/* 跳转个人主页 */
			person(user_id) {
				var myId = uni.getStorageSync('userInfo').id;
				if (myId == user_id) {
					uni.navigateTo({
						url: '/pages/school/my-center?user_id=' + user_id + '&users_type=' + this.users_type
					});
				} else {
					uni.navigateTo({
						url: '/pages/school/my-center?user_id=' + user_id + '&users_type=' + this.users_type
					});
				}
			}
		}
	};
</script>

<style>
	.videoAll {
		width: 100%;
		padding: 120upx 30upx;
		width: calc(100% - 60upx);
	}

	.none {
		color: #999999;
		text-align: center;
	}

	.none .iconwujilu {
		color: #e5e5e5;
		font-size: 306upx;
		line-height: 1;
		display: block;
	}

	.none text {
		color: #e5e5e5;
		font-size: 46upx;
		display: block;
	}

	.cont {
		display: flex;
		justify-content: space-between;
		flex-flow: wrap;
	}
	
	.contItem {
		position: relative;
		width: 48%;
		height: 460upx;
		margin: 10upx 0;
		border-radius: 8upx;
		background-size: cover !important;
	}
	.contItem image{
		width: 100%;
		height: 100%;
	}

	.item {
		position: absolute;
		bottom: 0;
		width: calc(100% - 50upx);
		padding: 0 20upx 0 30upx;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
	}

	.title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #ffffff;
	}

	.info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10upx;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
	}

	.info image {
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
	}

	.up {
		color: #ffffff;
		display: flex;
		align-items: center;
	}

	.up text {
		color: #FFFFFF;
	}

	.up i {
		font-size: 50upx;
		line-height: 1;
	}

	.zan_active {
		color: #ff4e78 !important;
	}

	.zan_active i {
		color: #ff4e78;
	}
</style>
